/**
 * Created by ljy on 2016/7/6.
 */
obj = {
    "前端技术":['HTML', 'CSS', 'JavaSript', 'jQuery', 'CSS3', 'HTML5', 'Angular', 'ionic'],
    "编程语言":['C', 'C++', 'Object-C', 'PHP', 'JAVA'],
    "数据库":['MySQL', 'SQLSever', 'Oracle', 'DB2'],
}
var data = ["面包","牛奶","诗","远方","苟且","梦想"]


// //购物车代码实现
// var $ = (function ($) {
//     //定义Buyer构造函数
//     function Buyer(oddsId,buyCarId,data) {
//         this.odds = $("#" + oddsId)
//         this.buycar = $("#" + buyCarId)
//         this.data = data
//         this.flag = []
//     }
//     Buyer.prototype = {
//         constructor:Buyer,
//         init:function () {
//             //根据data数据初始化odds列表
//             for (var i = 0; i < this.data.length; i++) {
//                 var msg = this.data[i];
//                 var li = $("<li>"+ msg +"<span></span></li>")
//                 li.appendTo(this.odds)
//                 //创建标签的同时，在flag中为每一个li标签加一个数量的标志位
//                 this.flag[i] = 0
//             }
//             var _this = this
//             this.odds.find("li").click(function () {
//                 _this.refresh($(this).index())
//
//             })
//         },
//         refresh:function (index) {
//             //清空购物车列表，在下面重新渲染
//             this.buycar.html("")
//             //点击后，标志位的更新
//             if(this.flag[index] === 0){
//                 this.flag[index] = 1
//             }else if(this.flag[index] > 0){
//                 this.flag[index] += 1
//             }
//             //重新渲染购物车页面
//             for (var i = 0; i < this.flag.length; i++) {
//                 var fg = this.flag[i];
//                 if(fg !== 0){
//                     $("#odds>li").eq(i).clone().appendTo(this.buycar)
//                         .find("span").html(this.flag[i])
//                 }
//             }
//         }
//     }
//     //把构造函数挂载到$上
//     $.extend({
//         Buyer:Buyer
//     })
//     return $
// })($)



var $ = (function ($) {

    //定义联动的构造函数
    function Liandong(proId,cityId,obj) {
        this.pro = $("#" + proId)
        this.city = $("#" + cityId)
        this.obj = obj
    }
    Liandong.prototype.init = function(){
        this.updataPro()
        this.updataCity()
        var _this = this
        this.pro.change(function () {
            _this.updataCity()
        })
    }
    Liandong.prototype.updataCity = function(){
        this.city.html("")
        for(var key in this.obj){
            if(this.pro.val() == key){
                var citys = this.obj[key]
                citys.forEach(function (value, index) {
                    var opt = $(document.createElement("option"))
                    opt.val(value)
                    opt.html(value)
                    opt.appendTo(this.city)
                })
            }
        }
    }
    Liandong.prototype.updataPro = function(){
        this.pro.html("")
        for(var key in this.obj){
            var opt = $(document.createElement("option"))
            opt.val(key)
            opt.html(key)
            opt.appendTo(this.pro)
        }
    }

    //定义购物车构造函数
    function Buyer(oddsId,buyCarId,data) {
        this.odds = $("#" + oddsId)
        this.buycar = $("#" + buyCarId)
        this.data = data
        this.flag = []
    }
    Buyer.prototype = {
        constructor:Buyer,
        init:function () {
            //根据data数据初始化odds列表
            for (var i = 0; i < this.data.length; i++) {
                var msg = this.data[i];
                var li = $("<li>"+ msg +"<span></span></li>")
                li.appendTo(this.odds)
                //创建标签的同时，在flag中为每一个li标签加一个数量的标志位
                this.flag[i] = 0
            }
            var _this = this
            this.odds.find("li").click(function () {
                _this.refresh($(this).index())
                note()
            })
        },
        refresh:function (index) {
            //清空购物车列表，在下面重新渲染
            this.buycar.html("")
            //点击后，标志位的更新
            if(this.flag[index] === 0){
                this.flag[index] = 1
            }else if(this.flag[index] > 0){
                this.flag[index] += 1
            }
            //重新渲染购物车页面
            for (var i = 0; i < this.flag.length; i++) {
                var fg = this.flag[i];
                if(fg !== 0){
                    $("#odds>li").eq(i).clone().appendTo(this.buycar)
                        .find("span").html(this.flag[i])
                }
            }
        }
    }

    //搭载到$上
    $.extend({
        Liandong:Liandong,
        Buyer:Buyer
    })
    return $
})($)


var ld = new $.Liandong("province","city",obj)
ld.init()

var buyer = new $.Buyer("odds","buycar",data)
buyer.init()



var mes = [
    {"id":1,"name":"Mr Li","content":"Object.prototype  .toString.call(para)","time":"检验对象的具体类型"},
    {"id":1,"name":"Mr Li","content":" 利用一个立即调用函数，创建一个封闭的区间来封闭不想公开的方法属性，利用return，或者往全局变量上挂载方法属性，来暴露想要公开的方法属性","time":"沙箱"},
    {"id":2,"name":"Mr Li","content":"基于谷歌V8引擎的JavaScript运行时环境","time":"nodeJs"},
    {"id":3,"name":"Mr Li","content":"是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。","time":"ionic"},
    {"id":4,"name":"Mr Li","content":"SeaJS是一个遵循CMD规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。","time":"seaJs"},
    {"id":5,"name":"Mr Li","content":"Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。","time":"boostrap"},
    {"id":5,"name":"Mr Li","content":"jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more","time":"jQuery"},
];



var topbox = $("#topbox");
function note() {
    $("#topbox").html("")
    for(var i = 0; i < mes.length; i++) {
        var div = document.createElement("div");
        div.className = "box";
        topbox.append(div);
        var ran = Math.random() * 600;
        var ran1 = Math.random() * 300;
        div.style.left = ran+"px";
        div.style.top = ran1+"px";
        var str = [];
        var str = '<div class="top" id="top">第[' + mes[i].id +']条 ' + mes[i].time  +
            '<div class="center">' + '<div>' + mes[i].content + '</div></div>' +
            '<div class="bottom">' +
            '<img class="f_l" src="images/bpic_1.gif" alt=""/>' +
            '<span>' + mes[i].name + '</span>' +
            '</div>';
        div.innerHTML = str;

        //纸条点击置于最高层的时间注册
        var zindex = 0;
        div.onclick = function () {
            this.style.zIndex = ++zindex;
        }
        //关闭按钮的时间注册
        div.ondblclick = function () {
            console.log("b");
            topbox.removeChild(this);
        }

        //添加拖拽的事件
        div.onmousedown = function(ell) {
            //记录下当前事件的对象，以供给onmousemove用
            var obj = this;
            var x = ell.pageX - obj.offsetLeft;
            console.log(obj.offsetLeft);
            console.log(obj.style.left);
            var y = ell.pageY - obj.offsetTop;
            console.log(this);
            document.onmousemove = function (el) {
                obj.style.left = el.pageX - x + "px";
                obj.style.top = el.pageY - y + "px";

                //取消文本的选择
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            };

        };
        document.onmouseup = function() {
            document.onmousemove = null;
        };
    }
}
note()




